#banner-content {
    min-height: inherit;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
    padding: .6em 0;
}

#banner-content>.nav-list-area {
    background-color: white;
    padding: .4em 0;
}

#banner-content>.nav-list-area>ul {
    font-size: .875rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#banner-content>.nav-list-area>ul>li {
    padding: .2em 0 .2em 1.2em;
    user-select: none;
}

#banner-content>.nav-list-area>ul>li:hover {
    background-color: #d9d9d9;
}

#banner-content>.nav-list-area>ul>li>span:hover {
    cursor: pointer;
    color: #c81623;
}

#banner-content>.nav-list-area>ul>li>i {
    font-size: .75rem;
    font-style: normal;
}

#banner-content>.banner-area {
    margin-left: .6rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

#banner-content>.banner-area>div:hover {
    cursor: pointer;
    opacity: .85;
}

#banner-content>.banner-area>div:nth-child(1) {
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
    overflow: hidden;
    display: flex;
}

#banner-content>.banner-area>div:nth-child(1):hover>.banner-1 {
    animation-play-state: paused;
}

#banner-content>.banner-area>div:nth-child(1)>.banner-1 {
    min-width: 100%;
    background-image: url(../assets/images/top-banner-image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    animation: banner-x-translation 12s ease .5s infinite;
}

#banner-content>.banner-area>div:nth-child(1)>.banner-2 {
    min-width: 100%;
    background-image: url(../assets/images/top-banner-image-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#banner-content>.banner-area>div:nth-child(1)>.banner-3 {
    min-width: 100%;
    background-image: url(../assets/images/top-banner-image-3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

@keyframes banner-x-translation {
    0% {
        margin-left: 0;
    }

    28% {
        margin-left: 0rem;
    }

    33% {
        margin-left: -36.9rem;
    }

    61% {
        margin-left: -36.9rem;
    }

    66% {
        margin-left: -73.8rem;
    }

    94% {
        margin-left: -73.8rem;
    }
}

#banner-content>.banner-area>div:nth-child(2) {
    background-image: url(../assets/images/top-banner-aside-1.png);
    background-size: cover;
}

#banner-content>.banner-area>div:nth-child(3) {
    background-image: url(../assets/images/top-banner-aside-2.png);
    background-size: cover;
}

#banner-content>.banner-area>div:nth-child(4) {
    background-image: url(../assets/images/top-banner-aside-3.png);
    background-size: cover;
}

#banner-content>.login-area {
    background-color: white;
    margin-left: .6rem;
    padding: .9em;
    display: flex;
    flex-direction: column;
}

#banner-content>.login-area>.log-in>div,
#banner-content>.login-area>.news>.title,
#banner-content>.login-area>.news>ul>li {
    display: flex;
}

#banner-content .log-in>div:nth-child(1)>img {
    vertical-align: bottom;
    width: 2.5rem;
    border: .125rem solid white;
    border-radius: 3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

#banner-content .log-in>div:nth-child(1)>img:hover {
    cursor: pointer;
}

#banner-content .log-in>div:nth-child(1)>div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: .75rem;
    margin-left: 1em;
}

#banner-content .log-in>div:nth-child(1)>div>span>span:hover,
#banner-content .log-in>div:nth-child(1)>div>.title:hover {
    cursor: pointer;
    color: #c81623;
}

#banner-content .log-in>div:nth-child(1)>div>span>i {
    font-style: normal;
}

#banner-content>.login-area>.log-in>.button-group {
    justify-content: center;
    justify-content: space-between;
    margin-top: .6em;
    padding-bottom: .5em;
    border-bottom: .0625rem solid #eeeeee;
}

#banner-content>.login-area>.log-in>.button-group>button {
    border: none;
    font-size: .75rem;
    border-radius: 1rem;
    padding: .38em 0;
    width: 6em;
}

#banner-content .log-in>.button-group>button:nth-child(1) {
    background-color: #e1251b;
    color: white;
}

#banner-content .log-in>.button-group>button:nth-child(2) {
    background-color: #363634;
    color: #dacd8a;
}

#banner-content .log-in>.button-group>button:hover {
    cursor: pointer;
    background-color: #c81623;
    color: white;
}

#banner-content .news {
    margin-top: .8em;
    padding-bottom: .6em;
    border-bottom: .0625rem solid #eeeeee;
}

#banner-content .news>.title {
    justify-content: space-between;
    margin-bottom: .55em;
}

#banner-content .news>.title>h4 {
    font-size: .875rem;
}

#banner-content .news>.title>span,
#banner-content .news>.title>span>i {
    font-size: .75rem;
}

#banner-content .news>.title>span:hover {
    cursor: pointer;
    color: #c81623;
}

#banner-content .news>ul>li {
    font-size: .75rem;
    margin-top: .5em;
}

#banner-content .news>ul>li:hover>div {
    cursor: pointer;
    color: #c81623;
}

#banner-content .news>ul>li>span {
    min-width: 2em;
    background-color: #fdeeed;
    color: #e1251b;
    padding: 0 .4em;
    user-select: none;
}

#banner-content .news>ul>li>div {
    margin-left: .6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666666;
}

#banner-content>.login-area>.nav-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: .8rem;
}

#banner-content>.login-area>.nav-grid>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}

#banner-content>.login-area>.nav-grid>div>i {
    font-size: 1.75rem;
    font-weight: 700;
}

#banner-content>.login-area>.nav-grid>div:nth-child(1)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(5)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(6)>i {
    color: #f2a234;
}

#banner-content>.login-area>.nav-grid>div:nth-child(2)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(3)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(9)>i {
    color: #5aaae5;
}

#banner-content>.login-area>.nav-grid>div:nth-child(4)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(8)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(10)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(12)>i {
    color: #eb675e;
}

#banner-content>.login-area>.nav-grid>div:nth-child(7)>i,
#banner-content>.login-area>.nav-grid>div:nth-child(11)>i {
    color: #45d8c8;
}

#banner-content>.login-area>.nav-grid>div:hover>i,
#banner-content>.login-area>.nav-grid>div:hover>span {
    cursor: pointer;
    color: #c81623;
}

#banner-content>.login-area>.nav-grid>div>span {
    font-size: .75rem;
    color: #333333;
}

#banner-content>.nav-list-area {
    position: relative;
}

/* 隐藏元素 */
#banner-content>.nav-list-area>ul>li:nth-child(1)>div {
    display: none;
    position: absolute;
    min-width: 62.5rem;
    min-height: 28.8rem;
    background-color: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
    top: 0;
    left: 12.5625rem;
}

#banner-content>.nav-list-area>ul>li:nth-child(1):hover>div {
    display: grid;
}

#banner-content .appliance-hidden-info {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    padding: 1.4em 1.75em;
}

#banner-content .appliance-hidden-info>.left-column {
    display: flex;
    flex-direction: column;
}

#banner-content .appliance-hidden-info>.left-column>.title {
    margin-bottom: 1em;
}

#banner-content .appliance-hidden-info>.left-column>.title>button {
    border: none;
    color: white;
    background-color: #333333;
    font-size: .75rem;
    padding: .3em .75em;
    margin-right: .4em;
}

#banner-content .appliance-hidden-info>.left-column>.title>button:hover {
    background-color: #c81623;
    cursor: pointer;
}

#banner-content .appliance-hidden-info>.left-column>.title>button>i {
    font-size: .75rem;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists>dl {
    display: flex;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists>dl>dt {
    font-size: .75rem;
    font-weight: 700;
    min-width: 5.2em;
    display: flex;
    justify-content: end;
    align-items: start;
    line-height: 2em;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists>dl>dt>i {
    margin-left: .2em;
    font-size: .75rem;
    font-weight: 700;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists>dl>dd {
    margin-left: 1.2em;
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    line-height: 2em;
    color: #666666;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists>dl>dd>span {
    padding-right: 1.2em;
}

#banner-content .appliance-hidden-info>.left-column>.category-lists>dl>dt:hover>*,
#banner-content .appliance-hidden-info>.left-column>.category-lists>dl>dd>span:hover {
    cursor: pointer;
    color: #c81623;
}

#banner-content .appliance-hidden-info>.right-column>.first {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .1em;
}

#banner-content .appliance-hidden-info>.right-column>.first>img {
    width: 100%;
}

#banner-content .appliance-hidden-info>.right-column>.second>img {
    width: 100%;
    margin-top: 1em;
}

#banner-content .appliance-hidden-info>.right-column img:hover {
    cursor: pointer;
}